<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>AppStore</title>

<!-- CSS IMPORT -->

<link rel="stylesheet" media="all" type="text/css" href="./css/normalize.css" />
<link rel="stylesheet" media="all" type="text/css" href="./css/bootstrap.css" />
<link rel="stylesheet" media="all" type="text/css" href="./css/bootstrap-responsive.min.css" />
<link rel="stylesheet" media="all" type="text/css" href="./css/font-awesome.min.css" />
<link rel="stylesheet" media="all" type="text/css" href="./css/newIdmTopBar.css" />
<link rel="stylesheet" media="all" type="text/css" href="./css/applicationTopBar.css" />

<!-- Font type for Alstom logo -->
<style type="text/css">
@font-face {
	font-family: 'alstom';
	src: url(./font/ALSTOMLOGO.TTF) format("truetype");
}
</style>

</head>

<body onload="welcome();">

	<!-- ************************************************************************************** -->
	<!-- ******************************************HEADER************************************** -->
	<!-- ************************************************************************************** -->
	
	<div id="newIdmTopBar">		
			<div class="navbar navbar-inverse">
				<div class="navbar-inner">
					<div class="container">
						<ul class="nav">
							<li><a href="#">Identity Manager</a></li>
							<li class="active"><a href="#">AppStore</a></li>
							<li><a href="#">Asset Manager</a></li>
							<li><a href="#">Outlook Manager</a></li>
							<li><a href="#">Request Catalog</a></li>
						</ul>
						<ul class="nav pull-right">
							<!-- <li><a href="#" class="newIdmTopBarNotifEmpty">0</a></li> -->
							<li class="dropdown">
								<a href="#" class="newIdmTopBarNotif dropdown-toggle" data-toggle="dropdown">1</a>
								<ul class="dropdown-menu newIdmTopBarNotifDropdow">
									<li>
										<div class="alert">
											This is a <strong>standart</strong> alert.
										</div>
									</li>
									<li>
										<div class="alert alert-success">
											This is a <strong>success</strong> alert taking two lines.
										</div>
									</li>
									<li>
										<div class="alert alert-error">
											This is an <strong>error</strong> alert.
										</div>
									</li>
								</ul>
							</li>
							<li class="dropdown">
								<a class="dropdown-toggle" href="#" data-toggle="dropdown"><img class="newIdmTopBarProfilePic" src="https://identitymanager.alstom.com:9443/index.php?uid=<%= session.getAttribute("SESSION_ALSTOMID")%>"></img><%= session.getAttribute("SESSION_FULLNAME")%> <b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li><a href="#"><img src="./img/flags/png/gb.png"> Language</a></li>
									<li><a href="#"><i class="icon-cogs"></i> Preferences</a></li>
									<li><a href="#"><i class="icon-archive"></i> Documentation</a></li>
									<li><a href="https://<%=request.getServerName()%>:442/alstore/logout.action"><i class="icon-off"></i> Disconnect</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		
		<div id="headerIDM" class="applicationTopBar">
			<div class="navbar">
				<div class="navbar-inner">
					<div class="container">
						<ul class="nav">
							<li>
								<a href="javascript:goToDiv('HOMEPAGE');"><i id="HOME" class="icon-home"></i><p>Home</p></a>
							</li>
							<li>
								<a href="javascript:goToDiv('SEARCHPAGE');"><i id="GETAPPS" class="icon-shopping-cart"></i><p>Get Apps</p></a>
							</li>
							<li>
								<a href="javascript:goToDiv('MYAPPS');"><i id="MYAPPS" class="icon-puzzle-piece"></i><p>My Apps</p></a>
							</li>
						</ul>
						<ul class="nav pull-right">
							<li>
								<a href="#"><img src="./img/altair.png" style="margin-top:1px;"></img><p>Altaïr</p></a>
							</li>
							<li>
								<a href="#"><img src="./img/shift.png" style="margin-top:1px;"></img><p>SHIFT</p></a>
							</li>
							<li>
								<a href="#"><img src="./img/yammer.png" style="margin-top:1px;"></img><p>Yammer</p></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
<%-- 	<%@ include file="./header/header1.jsp"%>
	<%@ include file="./header/header3.jsp"%> --%>


	<!-- ************************************************************************************** -->
	<!-- *********************************CONTENT********************************************** -->
	<!-- ************************************************************************************** -->

	<div class="content">
		<div id="content" class="container" style="display: none;">

			<!-- ****************************************************** -->
			<!-- **********************HOMEPAGE************************ -->
			<!-- ****************************************************** -->
			<div id="HOMEPAGE" class="row-fluid homeWelcome">
				<div class="span10 offset1">
					<div id="welcomeAppStore" class="row-fluid">
						<div class="span2"><i class="icon-shopping-cart" style="font-size:100px; color:rgb(37,107,183); "></i></div>
						<div class="span6">
							<h1 style="color:rgb(37,107,183);">Applicati<span style="color:#e74c3c;">o</span>n St<span style="color:#e74c3c;">o</span>re</h1>
							<h4>Get applications in a few clicks !</h4>
						</div>
						<div class="span4" style="text-align:right; padding-top:1em;">
							<p style="color:#7f8c8d; ">Quick search</p>
							<div class="input-append">
								<input type="text" placeholder="Quick search" id="inputQuickSearchApplication" onkeyup="searchApplicationSwitch(this.id, this.value, 'appSearchPagination', 'appSearchResultList', 12);">
								<span class="add-on"><i class="icon-search"></i></span>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="wellIDMHeader row-fluid" style="margin-top: 1em;">
							<div class="span1">
								<i class="icon-fire"></i>
							</div>
							<div class="span10">
								<p>Lastest applications</p>
							</div>
						</div>
						<div id="APPS_LASTEST" style="margin-top: 1em;"></div>
		
						<div class="wellIDMHeader row-fluid" style="margin-top: 1em;">
							<div class="span1">
								<i class="icon-download-alt"></i>
							</div>
							<div class="span10">
								<p>Most downloaded applications</p>
							</div>
						</div>
						<div id="APPS_MOSTDOWNLOADED" style="margin-top: 1em;"></div>
					</div>
				</div>
			</div>

			<!-- ****************************************************** -->
			<!-- *****************WELCOMEPROGRESSBAR******************* -->
			<!-- ****************************************************** -->
			<div id="WELCOMEPROGRESSBAR" class="row-fluid">
				<div class="span6 offset3 loadingWelcome">
					<h3>Welcome to Alstore</h3>
					<img src="./img/loading-animation-3.gif" />
					<p>Please wait</p>
				</div>
			</div>
			<!-- ****************************************************** -->
			<!-- *****************LOADINGAPP*************************** -->
			<!-- ****************************************************** -->
			<div id="LOADINGAPP" class="row-fluid">
				<div class="span6 offset3 loadingWelcome">
					<img src="./img/loading-animation-3.gif" />
					<p>Please wait</p>
				</div>
			</div>
			<!-- ****************************************************** -->
			<!-- *****************APPSPROGRESSBAR********************** -->
			<!-- ****************************************************** -->
			<div id="APPSPROGRESSBAR" class="row-fluid">
				<div class="span6 offset3 loadingWelcome">
					<h3>Retrieving applications</h3>
					<i class="icon-shopping-cart icon-spin"></i>
					<p>Please wait</p>
				</div>
			</div>

			<!-- ****************************************************** -->
			<!-- **********************SEARCHPAGE********************** -->
			<!-- ****************************************************** -->
			<div id="SEARCHPAGE" class="row-fluid">
				<div class="span10 offset1">
					<div class="wellIDM">
						<div class="row-fluid">
							<div class="span12">
								<div class="wellIDMHeader row-fluid">
									<div class="span1">
										<i class="icon-shopping-cart"></i>
									</div>
									<div class="span10">
										<p>Get applications</p>
									</div>
								</div>
								<div id="search" class="wellIDMContent row-fluid">
									<div class="input-append">
										<input type="text" placeholder="Search" class="input-xlarge" id="inputSearchApplication" onkeyup="searchApplicationSwitch(this.id, this.value, 'appSearchPagination', 'appSearchResultList', 12);">
										<span class="add-on"><i class="icon-search"></i></span>
									</div>
								</div>
								<div id="searchCategoryChoice" class="row-fluid">
								</div>
								<div id="appSearchResult" class="row-fluid">
									<div class="span12">
										<div id="appSearchPagination"></div>
										<div id="appSearchResultList"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- ****************************************************** -->
			<!-- **********************APPDESCRIPTION****************** -->
			<!-- ****************************************************** -->
			<div id="APPDESCRIPTION" class="row-fluid">
				<div class="span10 offset1">
					<div class="wellIDM">
						<div class="row-fluid">
							<div class="span10">
								<div class="wellIDMHeader row-fluid">
									<div class="span1">
										<i class="icon-shopping-cart"></i>
									</div>
									<div class="span10">
										<p>Application description</p>
									</div>
								</div>
								<div id="DESCRIPTION" class="wellIDMContent row-fluid">
									<div id="logo" class="span5"></div>
									<div id="content" class="span7">
										<div id="name"></div>
										<div id="category"></div>
										<div id="appDescription"></div>
										<input id="appId" value="" type="hidden" readonly="readonly" onpaste="return false;" oncontextmenu="return false;"/>
									</div>
								</div>
								<div class="wellIDMHeader row-fluid">
									<div class="span1">
										<i class="icon-star"></i>
									</div>
									<div class="span10">
										<p>Rating</p>
									</div>
								</div>
								<div id="RATING" class="wellIDMContent row-fluid">
									<div id="RATING_RESUME" class="span7">
										<div id="average"></div>
										<div id="5"></div>
										<div id="4"></div>
										<div id="3"></div>
										<div id="2"></div>
										<div id="1"></div>
										<div id="refreshingRatings" style="display:none; ">
											<i class="icon-star icon-spin icon-large"></i>
											<i class="icon-star icon-spin icon-large"></i>
											<i class="icon-star icon-spin icon-large"></i>
											<i class="icon-star icon-spin icon-large"></i>
											<i class="icon-star icon-spin icon-large"></i>
										</div>
									</div>
									<div class="span5">
										<div class="row-fluid">
											<p id="rateThisApp">Rate this application</p>
										</div>
										<div id="userRating" class="row-fluid">
											<span onclick="sendRating(5);" class="star"></span> 
											<span onclick="sendRating(4);" class="star"></span> 
											<span onclick="sendRating(3);" class="star"></span> 
											<span onclick="sendRating(2);" class="star"></span> 
											<span onclick="sendRating(1);" class="star"></span>
										</div>
										<div id="thankVote" class="alert alert-success" style="display:none; margin-top:1em;">
											<strong>Thank you</strong> for your vote!
										</div>
									</div>
								</div>
								<div class="wellIDMHeader row-fluid">
									<div class="span1">
										<i class="icon-comment"></i>
									</div>
									<div class="span10">
										<p>Comments</p>
									</div>
								</div>
								<div id="ADD_COMMENT" class="wellIDMContent row-fluid">
									<div id="logoComment" class="span1">
										<i class="icon-quote-right"></i>
									</div>
									<div class="span8">
										<textarea id="sendAppCommentInput" rows="2" class="span12"></textarea>
									</div>									
									<div id="commentSend" class="span2">
										<div class="row-fluid">
											<button class="btn span12" onclick="sendComment('sendAppCommentInput');">
												<div class="row-fluid icon">
													<i class="icon-pencil"  style="color:#16a085;"></i>
													</div>
													<div class="row-fluid title">
													<p  style="color:#16a085;">Send comment</p>
												</div>
											</button>
										</div>
									</div>
								</div>
								<div id="COMMENTS" class="wellIDMContent row-fluid"></div>
							</div>
							<div class="span2">
								<!-- *******************ACTIONBLOCK******************** -->
								<div id="ACTIONBLOCK" class="wellIDM" style="margin-top: 4em;">
									<!-- *******************ACTIONBTNS******************** -->
									<div id="ACTIONBTNS" class="ACTIONBTNS"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- ****************************************************** -->
			<!-- **********************MYAPPS************************** -->
			<!-- ****************************************************** -->
			<div id="MYAPPS" class="row-fluid">
				<div class="span10 offset1">
					<div class="wellIDM">
						<div class="row-fluid">
								<div class="wellIDMHeader row-fluid">
									<div class="span1">
										<i class="icon-puzzle-piece"></i>
									</div>
									<div class="span10">
										<p>My applications</p>
									</div>
								</div>
								<div id="MYAPPS_FILTER" class="row-fluid" style="margin-top:1em;">
									<div class="span4 offset8" style="text-align:right;">
										<div class="input-append">
											<input placeholder="Find an app." id="filterMyApps" type="text" onkeyup="filterResult('myApps', '', 'MYAPPS_PAGINATION', 'MYAPPS_CARDS', '', this.value, 12)">
											<span class="add-on"><i class="icon-search"></i></span>
										</div>
									</div>
								</div>
								<div id="MYAPPS_PAGINATION"></div>
								<div id="MYAPPS_CARDS" style=""></div>
							<!-- <div class="span2">
								*******************ACTIONBLOCK********************
								<div id="ACTIONBLOCK" class="wellIDM" style="margin-top: 2em;">
									<div class="wellIDMHeaderInfo row-fluid">
										<div class="span2"></div>
										<div class="span10"></div>
									</div>
									*******************ACTIONBTNS********************
									<div id="ACTIONBTNS" class="ACTIONBTNS"></div>
								</div>
							</div> -->
						</div>
					</div>
				</div>
			</div>
			
			<!-- ****************************************************** -->
			<!-- *******************CONNECTION*LOST******************** -->
			<!-- ****************************************************** -->
			<div id="CONNECTIONLOST">
				<div class="span10 offset1" style="text-align:center; margin-top:2em;">
					<h1><i class="icon-ban-circle" style="color:#e74c3c; "></i> Oops! Cannot connect to the server.</h1>
					<h4>Please refresh the page or try again later.</h4>
				</div>
			</div>

			<!-- **********************END************************* -->
		</div>
	</div>
	
	<!-- MODALS -->

	<div id="requestAppModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="requestAppModalLabel" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">Request application</h3>
		</div>
		<div id="requestAppModalBody" class="modal-body">
			<div id="requestAppModalNoPackage" class="alert alert-warning">
				There are <strong>no packages available</strong> for this application.
			</div>
			<form class="form-horizontal">
				<div class="control-group">
					<label class="control-label" for="requestAppSelectVersion">Version</label>
					<div class="controls">
						<select id="requestAppSelectVersion"></select>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="requestAppSelectLanguage">Language</label>
					<div class="controls">
						<select id="requestAppSelectLanguage"></select>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="requestAppSelectPc">Computer</label>
					<div class="controls">
						<select id="requestAppSelectPc">
							<option>PC 1</option>
							<option>PC 2</option>
							<option>PC 3</option>
						</select>
					</div>
				</div>
			</form>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
		</div>
	</div>

	<!-- INPUTS -->

	<div id="searchUserChoice">
		<input type="hidden" id="searchChoice" readonly="readonly" value="" onpaste="return false;" oncontextmenu="return false;" />
		<input type="hidden" id="previousPage" readonly="readonly" value="'HOMEPAGE'" onpaste="return false;" oncontextmenu="return false;" />
		<input type="hidden" id="loggedUserAlstomId" readonly="readonly" value="<%= session.getAttribute("SESSION_ALSTOMID")%>" onpaste="return false;" oncontextmenu="return false;" />
	</div>

	<!-- Javascript -->

	<!-- Javascript -->
	<script src="./js/browserdetect.js"></script>
	<script type="text/javascript"
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script src="./js/bootstrap.js"></script>
	<script src="./js/window.js"></script>

	<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
	<script src="./js/jstorage.js"></script>
	<script src="./js/resizeBody.js"></script>

	<!-- Call Ajax -->
	<script src="./js/generateHTML/generatePages.js"></script>
	<script src="./js/ajaxCall/ajaxCall.js"></script>
	<script src="./js/ajaxCall/appComment.js"></script>
	<script src="./js/ajaxCall/appRating.js"></script>
	<script src="./js/ajaxCall/search.js"></script>
	<script src="./js/generateHTML/generateSmallContent.js"></script>
	
	<script src="./js/pagination/pagination.js"></script>
	<script src="./js/inject/AppStoreInject.js"></script>
	<script src="./js/inject/AppStoreRequestApp.js"></script>
</body>
</html>